<template>
  <div class="main">
      <div class="denglu">
          <div class="header">
              <span :class="{active:name === 'zhanghu'}" @click="name = 'zhanghu'">账户登录</span>
              <span @click="name = 'saoma'" :class="{active:name=== 'saoma'}">扫码登录</span>
          </div>
          <!-- 账户登录 -->
      <div class="message" v-if="name === 'zhanghu'">
          <LoginForm />
      </div>
      <!-- /账户登录 -->
      <!-- 扫码登陆 -->
      <div class="qrcode" v-if="name === 'saoma'">
          <img src="../../../assets/images/qrcode.jpg" alt="">
          <p>打开<span>小兔鲜儿App</span>扫码登陆</p>
      </div>
      <!-- /扫码登陆 -->
      </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import LoginForm from './login-form.vue'
export default {
  name: 'XtxMain',
  components: {
    LoginForm
  },
  setup () {
    const name = ref('zhanghu')

    return { name }
  }
}
</script>

<style scoped lang="less">
.main {
    height: 488px;
    position: relative;
    background: url(../../../assets/images/login-bg.png) no-repeat center;
      .denglu {
        position: absolute;
        top: 55px;
        left: 50%;
        transform: translate3d(100px,0,0);
        min-height: 400px;
        width: 380px;
        background-color: #fff;
        box-shadow: 2px 2px 6px 4px ;
        .qrcode {
            padding-top: 30px;
            text-align: center;
            p {
                padding-top: 30px;
                span {
                    color: @xtxColor;
                    font-size: 18px;
                }
            }
        }
        .header {
            display: flex;
            height: 55px;
            border-bottom: 1px solid #ccc;
            padding: 0 40px;
            justify-content: space-between;
            align-items: center;
            span {
                font-size: 18px;
                cursor: pointer;
                &.active {
                    color: @xtxColor;
                    font-weight: 700;
                }
            }
        }
    }
    .message {
        padding: 0 40px;
    }
}
</style>
